
<style scoped lang="less">
/*.container-water-fall {
  width: 100vw;
  box-sizing: border-box;
}*/
.container-water-fall h4 {
  padding-top: 56px;
  padding-bottom: 28px;
  font-family: PingFangSC-Medium;
  font-size: 36px;
  color: #ec1919;
  letter-spacing: 1px;
  text-align: justify;
}

.cell-item {
  width: 95%;
  background: #ffffff;
  border: 2px solid #f0f0f0;
  border-radius: 0.6rem;
  overflow: hidden;
  box-sizing: border-box;
  margin: 10px 5px;
  box-shadow: 1px 1px 3px -2px;
}
.cell-item img {
  width: 100%;
  height: auto;
  display: block;
}
.item-body {
  padding: 12px;
}
.item-body .item-desc {
  font-size: 17px;
  color: #333333;
  line-height: 17px;
  font-weight: 600;
}
.item-footer {
  margin-top: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  .details {
    font-size: 14px;
  }
  .price {
    font-size: 18px;
    font-weight: 600;
    color: orangered;
  }
  .tagbtn {
    .van-tag {
      margin: 2px;
      margin-left: 10px;
    }
  }
}
</style>
<template>
  <div class="container-water-fall">
    <waterfall :col="col" :data="data" @loadmore="loadmore">
      <template>
        <div
          class="cell-item"
          v-for="(item, index) in data"
          :key="index"
          @click="linkDetails"
        >
          <img v-if="item.img" :src="item.img" alt="加载错误" />
          <div class="item-body">
            <div class="item-desc">{{ item.title }}</div>

            <div class="item-footer" v-for="(elem, i) of detailArr" :key="i">
              <div class="details">
                {{ elem.details }}
              </div>
              <div class="price">
                {{ elem.price }}
              </div>
              <div class="tagbtn">
                <van-tag
                  plain
                  color="#ffe1e1"
                  text-color="#666"
                  v-for="(el, dex) of elem.tag"
                  :key="dex"
                  >{{ el }}</van-tag
                >
              </div>
            </div>
          </div>
        </div>
      </template>
    </waterfall>
    <loading :show="loading" />
  </div>
</template>

<script>
/*
  注意:
  1.itemWidth需要与gutterWidth一起使用才会生效，否则会进行自适应宽度
  2.使用了waterfall的组件不允许使用scoped,否则样式会有问题
*/
import loading from "./loading";
export default {
  props: {
    isFinite: Boolean,
  },
  components: {
    loading,
  },
  data() {
    return {
      data: [],
      col: 2,
      loading: false,
      gitHubData: {},
      detailArr: [
        {
          details: "合租.望京西园三区-主卧",
          price: "¥5200元/月",
          tag: ["近地铁", "有电梯", "采光好", "立即入住"],
        },
      ],
      originData: [
        {
          img: require("../assets/img/roomshow/show1.jpg"),
          details: "1室1厅1卫|19m²|南距离望京站379m",
          title: "合租.望京-主卧",
          user: "www",
          like: "953",
        },
        {
          img: require("../assets/img/roomshow/show2.jpg"),

          title: "合租.天通苑东二区-次卧-2",
          user: "迷人的小妖精迷人的小妖精",
          like: "952",
        },
        {
          img: require("../assets/img/roomshow/show3.jpg"),

          title: "合租.天通苑-小次卧-2",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: require("../assets/img/roomshow/show4.jpg"),

          title: "合租.天通苑东二区-次卧-2",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: require("../assets/img/roomshow/show5.jpg"),

          title: "合租.天通苑东二区-次卧-2",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: require("../assets/img/roomshow/show6.jpg"),

          title: "合租.天通苑东二区-次卧-2",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
         {
          img: require("../assets/img/roomshow/show7.jpg"),

          title: "合租.天通苑东二区-次卧-2",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
         {
          img: require("../assets/img/roomshow/show8.jpg"),

          title: "合租.天通苑东二区-次卧-2",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
      ],
    };
  },
  computed: {
    itemWidth() {
      return 133 * 0.5 * (document.documentElement.clientWidth / 375);
    },
    gutterWidth() {
      return 10 * 0.5 * (document.documentElement.clientWidth / 375);
    },
  },
  methods: {
    linkDetails() {
      this.$router.push({
        name: "roomDetails",
        params: { parent: "home" },
      });
    },
    reset() {
      this.data = [];
    },

    switchCol(col) {
      this.col = col;
    },

    loadmore() {
      if (this.isFinite) {
        // 有限
        console.log("aa");
      } else {
        // 无限
        this.loading = true;
        setTimeout(() => {
          this.data = this.data.concat(this.originData, this.originData);
          this.loading = false;
        }, 1000);
      }
    },
  },
  mounted() {
    this.data = this.originData;
  },
};
</script>